<script setup lang="ts">
import { reactive, ref } from "vue";
import type { TabsPaneContext } from "element-plus";

defineProps<{ msg: string }>();

const drawer2 = ref(false);
const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log("456", tab, event);
};
const kx: any = ref([
  { id: "1", title: "第一条", checked: false, content: "这是第一条数据" },
  { id: "1", title: "第二条", checked: false, content: "这是第二条数据" },
  { id: "1", title: "第三条", checked: false, content: "这是第三条数据" },
]);
const yx: any = ref([]);
const yxn = ref("0");
const kxn = ref("0");
const yxt = () => {
  console.log(kx.value);
  yxn.value = kx.value.filter((i: any) => i.checked).length;
};
const kxt = () => {
  kxn.value = yx.value.filter((i: any) => i.checked).length;
};
const tj = () => {
  let selectdata = kx.value.filter((item: any) => item.checked == true);
  yx.value.push(...selectdata);
  kx.value = kx.value.filter((v: any) => !v.checked);
};
const sc = () => {
  let selectdata = yx.value.filter((item: any) => item.checked == true);
  kx.value.push(...selectdata);
  yx.value = yx.value.filter((v: any) => !v.checked);
};
</script>

<template>
  <svg class="gticon gticon-colorPepper-single" aria-hidden="true">
    <use xlink:href="#gticon-colorPepper" />
  </svg>
  <span class="gticonfont gticon-colorPepper"></span>
  <span class="gticonfont gticon-youhui"></span>
</template>

<style scoped>
.gticon-colorPepper-single {
  font-size: 50px;
  /* color: #ff0a0a; */
}
.gticon-colorPepper {
  font-size: 50px;
  color: #ff0a0a; /* 设置颜色会变成这个颜色的单色图标 */
}
.gticon-youhui {
  font-size: 50px;
  color: #795151;
}
</style>
